﻿<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<input hidden id="loadCatalogId" th:value="${play['id']}"/>
<input hidden id="loadCourseId" th:value="${play['courseId']}"/>
<th:block th:if="${play['materialTypeKey']} == 'ARTICLE'">
    <h1 class="article-title" id="course-article-title" th:text="${play['catalogName']}"></h1>
    <div class="facebook-card mt5 pt5">
        <div class="clearfix">
            <aside class="pull-right c-bbb mt5">
               <!-- <span class="fs4 vam" th:if="${play['studyNum']} >= 10000" th:text="${play['studyNum'] / 10000} + '万人阅读'"></span>
                <span class="fs4 vam" th:if="${play['studyNum']} < 10000" th:text="${play['studyNum']} + '人阅读'"></span>-->
            </aside>
            <div class="facebook-name c-333 pt5">
                <span class="fs4 vam" th:text="${play['createTime']}"></span>
            </div>
        </div>
    </div>
    <div class="c-article-txt__wrap" id="course-article-content">
        <!--p标签不要删-->
        <p th:utext="${play['material']['articleContext']}"></p>
    </div>
</th:block>
<th:block th:if="${play['materialTypeKey']} == 'AUDIO'">
    <section class="course-play__wrap" th:if="${play['material']['playType']} =='96K'">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left goBack mt5" href="javascript:history.back()">
                <span class="icon icon-left"></span>
            </a>
            <h1 class="title" id="audioTitle"></h1>
        </header>
        <div class="cp-shadow audio-shadow">
        <div class="box_radio">
            <div class="audio_box">
                <div class="music-nav" id="audio_progress">
                    <!--进度条-->
                    <div class="audio_progress">
                        <span class="audio_line"></span>
                        <span class="audio_blue"></span>
                        <span class="audio_dot"></span>
                        <!--<input type="text" min="0" max="0" step="0.4" value="0" id="scale" >-->
                        <span id="scale"></span>
                    </div>
                    <!--当前时间-->
                    <div class="time" id="time_cur" style="float: left;">00:00</div>
                    <!--歌曲时长-->
                    <div class="time" id="time_long" style="float: right;">04:08</div>
                </div>
                <!--音乐控制面板-->
                <div class="audio_btn">
                    <!--快退-->
                    <span class="btn_ff" id="btn_prev"></span>
                    <!--<img class="btn_ff" id="btn_prev" th:src="@{{path}/front/mobile/v3/img/audio/btn_ff.png(path=${staticPath})}" alt="">-->
                    <!--旋转碟片-->
                    <!--<div class="cover" id="play"></div>--%>
                    <!--暂停/播放按钮-->
                    <div class="btn_play"></div>
                    <!--快进-->
                    <span class="btn_fr" id="btn_next"></span>
                    <!--<img class="btn_fr" id="btn_next" th:src="@{{path}/front/mobile/v3/img/audio/btn_fr.png(path=${staticPath})}" alt="">-->
                </div>
                <audio id="96k_video" th:attr="videocode=${play['material']['playUrl']}" src="" x5-playsinline="" playsinline="" webkit-playsinline="" autoplay="autoplay">
                    你的手机浏览器太古老了，不支持音频播放器.
                </audio>
            </div>
        </div>
        </div>
    </section>
</th:block>
<th:block th:if="${play['materialTypeKey']} == 'VIDEO'">
    <th:block th:if="${play['material']['playType']} == '96K'">
        <input id="VIDEO_PlayUrl" th:value="${player}+'?width=100%&height=100%&videoId='+${play['material']['playUrl']}" hidden/>
    </th:block>
</th:block>
<th:block th:if="${play['materialTypeKey']} == 'LIVE'">
    <a target="_blank" th:href="@{{playUrl}(playUrl =${play['material']['playUrl']})}" hidden id="living-link"></a>
</th:block>
